<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style>
        h1,
        h2,
        h3 {
            color: #0056b3;
        }

        p {
            margin: 10px 0;
        }

        ul,
        ol {
            margin: 10px 0 20px 20px;
        }

        pre {
            background: #f4f4f4;
            padding: 10px;
            overflow-x: auto;
        }

        code {
            background: #e8e8e8;
            padding: 2px 4px;
            font-family: Consolas, monospace;
            border-radius: 3px;
        }

        footer {
            margin-top: 40px;
            border-top: 1px solid #ddd;
            padding-top: 20px;
            color: #666;
        }

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            width: 100vw;
            height: 100vh;
        }

        .layout {
            position: absolute;
        }

        .left {
            left: 0;
            top: 48px;
            width: 200px;
            height: calc(100vh - 48px);
            background-color: rgb(230, 230, 230);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }

        .leftButton {
            width: 100%;
            padding: 16px 16px;
            color: black;
            font-size: 14px;
            border-left: 4px solid transparent;
        }

        .leftButton:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .leftButton:active {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .leftButton-selected {
            width: 100%;
            padding: 16px 16px;
            color: black;
            font-size: 14px;
            background-color: rgba(0, 183, 255, 0.2);
            border-left: 4px solid rgba(0, 183, 255, 1);
        }

        .leftButton-selected:hover {
            background-color: rgba(0, 183, 255, 0.3);
        }

        .leftButton-selected:active {
            background-color: rgba(0, 183, 255, 0.2);
        }

        .title {
            left: 0;
            top: 0;
            width: 100vw;
            height: 48px;
            background-color: rgba(0, 120, 215);
        }

        .content {
            width: calc(100vw - 200px);
            height: calc(100vh - 48px);
            right: 0;
            bottom: 0;
            overflow-y: auto;
            padding: 16px;
        }

        .content-show {
            visibility: visible;
        }

        .content-hide {
            visibility: hidden;
        }

        .titleText {
            width: max-content;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 16px;
            color: white;
            font-size: 22px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script>
        function changePage(to) {
            for (let i = 1; i <= 5; i++) {
                document.getElementById("content-" + i).classList.remove("content-show")
                document.getElementById("left-" + i).classList.remove("leftButton-selected")
                document.getElementById("content-" + i).classList.add("content-hide")
                document.getElementById("left-" + i).classList.add("leftButton")
            }

            document.getElementById("content-" + to).classList.remove("content-hide")
            document.getElementById("left-" + to).classList.remove("leftButton")
            document.getElementById("content-" + to).classList.add("content-show")
            document.getElementById("left-" + to).classList.add("leftButton-selected")
        }
    </script>
</head>

<body>
    <div class="layout left">
        <div on onclick="changePage(1)" id="left-1" class="leftButton-selected">
            前端开发简介
        </div>
        <div onclick="changePage(2)" id="left-2" class="leftButton">
            HTML 基础
        </div>
        <div onclick="changePage(3)" id="left-3" class="leftButton">
            CSS 样式与布局
        </div>
        <div onclick="changePage(4)" id="left-4" class="leftButton">
            JavaScript 与交互
        </div>
        <div onclick="changePage(5)" id="left-5" class="leftButton">
            前端框架与工具
        </div>
    </div>
    <div class="layout title">
        <div class="titleText">
            前端开发技术
        </div>
    </div>
    <div id="content-5" class="layout content content-hide">
        <h1>前端框架与工具</h1>

        <!-- 常见前端框架 -->
        <section id="frontend-frameworks">
            <h2>常见前端框架</h2>
            <p>当前市面上有多种前端框架，它们各自拥有独特的设计理念和使用场景，能够帮助开发者快速构建交互性和响应迅速的用户界面。下面是几个主流框架的简介：</p>
            <ul>
                <li>
                    <strong>React：</strong>由 Facebook 推出，这是一款基于组件化设计的 JavaScript 库，专注于构建高效、灵活的用户界面。React 的虚拟 DOM
                    能够高效地更新页面，拥有庞大的生态系统，并且在单页应用（SPA）开发中占据重要地位。
                </li>
                <li>
                    <strong>Vue：</strong>一款渐进式前端框架，设计目标在于逐步采用。在 Vue
                    中，通过简单易用的数据绑定和组件化开发，不仅能够快速上手，而且能够灵活扩展到大型项目中，适用于构建交互丰富的用户界面。
                </li>
                <li>
                    <strong>Angular：</strong>这是由 Google 推出的一款完整的前端解决方案，基于 TypeScript 语言，采用了 MVC/MVVM 架构。Angular
                    提供了丰富的功能和工具支持，适用于构建企业级应用和复杂的前端项目。
                </li>
            </ul>
        </section>

        <!-- 构建工具 -->
        <section id="build-tools">
            <h2>构建工具</h2>
            <p>随着前端开发的不断发展，构建工具在项目开发和部署中发挥着至关重要的作用。它们能帮助开发者将源码进行转换、打包、压缩和优化，从而提升开发效率，并保证最终代码的性能。下面介绍两款主流的构建工具：</p>
            <ul>
                <li>
                    <strong>Webpack：</strong>一种功能强大的模块打包工具，它能够将 JavaScript、CSS、图片等各种资源打包成静态文件。Webpack 拥有完善的插件机制和 Loader
                    系统，支持代码分割、懒加载和热更新等高级功能，使得大型项目的构建和维护更加便捷。
                </li>
                <li>
                    <strong>Vite：</strong>一款现代化的前端构建工具，利用浏览器原生 ES 模块特性实现了极速冷启动和高效的模块热更新。Vite
                    配置简单、性能优越，极大地提升了开发体验，正逐渐受到越来越多前端开发者的青睐。
                </li>
            </ul>
        </section>

        <!-- 代码质量与优化 -->
        <section id="code-quality">
            <h2>代码质量与优化</h2>
            <p>为了确保前端代码的可维护性和高性能，开发者需要关注以下两个方面：</p>
            <ul>
                <li>
                    <strong>Linting：</strong>
                    <p>Linting 工具，如 ESLint 或
                        Stylelint，能够自动检测代码中的错误和风格问题，确保代码符合团队规定的编码规范。通过持续集成和自动化的检测流程，团队可以保持一致的代码风格，及时发现潜在问题，从而提高代码质量和开发效率。
                    </p>
                </li>
                <li>
                    <strong>性能优化：</strong>
                    <p>性能优化涵盖了代码压缩、图像优化、缓存策略与资源加载优化等措施。例如，代码分割和懒加载能有效减少初始加载时间，而 Tree Shaking
                        技术则可以移除未使用的代码。综合运用这些优化技术，不仅能提升网站加载速度，更能改善用户体验。</p>
                </li>
            </ul>
        </section>

        <footer>
            <p>以上内容详细介绍了前端开发中常见的框架（如
                React、Vue、Angular）、主流构建工具（Webpack、Vite）以及代码质量与性能优化的关键措施。掌握这些技术和工具将帮助你构建高效、易维护且性能出众的现代化前端应用。</p>
        </footer>
    </div>
    <div id="content-4" class="layout content content-hide">
        <h1>JavaScript 与交互</h1>

        <!-- JavaScript 的作用 -->
        <section id="js-purpose">
            <h2>JavaScript 的作用</h2>
            <p>JavaScript 是一种高级、解释型编程语言，主要用于为网页增加动态交互能力。通过
                JavaScript，开发者可以实现诸如用户交互、动画效果、数据验证以及实时更新页面内容等功能。简单来说，JavaScript 使得静态页面变得生动，提升了用户体验和网站的交互性。</p>
        </section>

        <!-- 变量、函数、事件处理 -->
        <section id="js-basics">
            <h2>变量、函数与事件处理</h2>
            <p>
                在 JavaScript 中，<strong>变量</strong>用于存储数据。你可以通过 <code>var</code>、<code>let</code> 或 <code>const</code>
                来声明变量。例如：
            </p>
            <pre>
      let message = "Hello, world!";
      const PI = 3.1416;
          </pre>
            <p>
                <strong>函数</strong>是封装代码块的基本手段，可以重复执行特定任务。例如：
            </p>
            <pre>
      function greet(name) {
        console.log("Hello, " + name + "!");
      }
      greet("Alice");
          </pre>
            <p>
                <strong>事件处理</strong>是指对用户行为（如点击、悬停、键盘输入等）作出响应。通过绑定事件处理函数，开发者可以捕捉并响应这些行为：
            </p>
            <pre>
      document.getElementById("myButton").addEventListener("click", function() {
        alert("按钮被点击了！");
      });
          </pre>
            <p>
                这种事件驱动的编程模式是构建互动性网站的重要基础。
            </p>
        </section>

        <!-- DOM 操作与动态更新页面 -->
        <section id="js-dom">
            <h2>DOM 操作与动态更新页面</h2>
            <p>
                DOM（文档对象模型）将 HTML 页面中的所有元素表示为一个树状结构，让 JavaScript 能够对页面进行读取、修改、添加或删除操作。通过 DOM
                操作，开发者可以实现动态内容更新，比如改变文本、响应用户操作或者动态添加新的页面元素。
            </p>
            <p>例如，下面的代码通过 DOM 方法修改页面中 ID 为 <code>content</code> 的元素的文本内容：</p>
            <pre>
      document.getElementById("content").innerText = "页面内容已更新！";
          </pre>
            <p>
                此外，开发者可以使用 DOM 方法创建新的元素并将其插入页面中，以实现动态更新页面和响应用户交互的效果。
            </p>
        </section>

        <!-- AJAX 与异步数据交互 -->
        <section id="js-ajax">
            <h2>AJAX 与异步数据交互</h2>
            <p>
                AJAX（Asynchronous JavaScript and XML）是一种在不重新加载整个页面的情况下，与服务器进行异步数据交换的技术。使用
                AJAX，可以实现局部刷新、更新数据和动态交互，而不打断用户体验。
            </p>
            <p>
                传统的 AJAX 技术通常基于 <code>XMLHttpRequest</code> 对象，而现代开发中往往使用更简洁的 <code>fetch</code> API。例如，下面的代码演示了如何使用
                <code>fetch</code> 获取数据，并在控制台输出返回的 JSON 数据：
            </p>
            <pre>
      fetch('https://api.example.com/data')
        .then(response =&gt; response.json())
        .then(data =&gt; {
          console.log(data);
        })
        .catch(error =&gt; {
          console.error('发生错误：', error);
        });
          </pre>
            <p>
                通过 AJAX 技术，页面可以在后台请求数据并实时更新显示，而不打断用户的操作流程。这种方式在构建单页应用（SPA）、实时数据展示和现代化 Web 应用中非常常见。
            </p>
        </section>

        <footer>
            <p>
                以上内容详细介绍了 JavaScript 在网页交互中的作用，包括变量、函数和事件处理机制，通过 DOM 操作实现页面动态更新以及使用 AJAX
                技术进行异步数据交互。掌握这些技术将大大提升你构建交互性、响应迅速的网页应用的能力。
            </p>
        </footer>
    </div>
    <div id="content-3" class="layout content content-hide">
        <h1>CSS 样式与布局</h1>

        <!-- 什么是 CSS？ -->
        <section id="what-is-css">
            <h2>什么是 CSS？</h2>
            <p>CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML 文档外观和格式的样式语言。通过将内容与展示分离，CSS
                使得开发者能够对网页的布局、颜色、字体、间距、动画等进行统一控制，从而提升网站的可维护性与美观性。CSS 的层叠性和继承性让多个样式规则可以有机融合，为网站设计提供了极大的灵活性与便利。</p>
        </section>

        <!-- 选择器和样式规则 -->
        <section id="selectors-style-rules">
            <h2>选择器和样式规则</h2>
            <p>CSS 的基本构成单元是样式规则，而样式规则由选择器和声明块组成：</p>
            <ul>
                <li><strong>选择器：</strong>用于选中页面中要应用样式的 HTML 元素。常见选择器包括：</li>
                <ul>
                    <li><em>元素选择器</em>（如：<code>p</code>, <code>h1</code>）</li>
                    <li><em>类选择器</em>（如：<code>.container</code>）</li>
                    <li><em>ID 选择器</em>（如：<code>#header</code>）</li>
                    <li><em>属性选择器</em>、<em>后代选择器</em>及各种 <em>伪类</em> 选择器</li>
                </ul>
                <li><strong>声明块：</strong>包含一组由分号分隔的“属性: 值”对，定义了对应元素应采用的样式。其基本语法格式如下：</li>
            </ul>
            <pre>
选择器 {
  属性: 值;
  属性: 值;
}
    </pre>
            <p>例如，下面的规则将所有段落设为深灰色并提供1.5倍行高：</p>
            <pre>
p {
  color: #333;
  line-height: 1.5;
}
    </pre>
            <p>此外，样式层叠的原则（例如内联样式、ID 选择器、类选择器、元素选择器的优先级）确保多个样式文件能够协调工作，决定了最终生效的样式。</p>
        </section>

        <!-- 常见布局方式 -->
        <section id="common-layouts">
            <h2>常见布局方式</h2>
            <p>在 CSS 中，有多种布局方式可以帮助我们组织页面内容与结构。下面列举了三种主流布局方式：</p>

            <h3>Flexbox 布局</h3>
            <p>Flexbox 是一种用于一维布局的模型，它使子元素在容器内沿着主轴与交叉轴灵活分布。其主要特点包括灵活的对齐、分配剩余空间和支持换行，非常适合用于导航栏、工具条和简单的列表布局。</p>

            <h3>Grid 布局</h3>
            <p>Grid 布局是一种二维布局系统，将页面划分为行和列的网格，方便构建复杂的页面结构。借助 Grid 布局，开发者可以精确控制页面各部分的大小和位置，适用于布局要求较高的网页设计。</p>

            <h3>Float 布局</h3>
            <p>Float 最初用于实现文字环绕和简单多列布局，通过让元素向左或右浮动来排布页面。虽然近年来已逐渐被 Flexbox 和 Grid 替代，但在一些特定场景下，例如图文混排，Float
                布局仍有其应用价值。需要注意的是，使用 Float 后常常需要清除浮动（clearfix）以防止布局问题。</p>
        </section>

        <!-- 响应式设计与媒体查询 -->
        <section id="responsive-design">
            <h2>响应式设计与媒体查询</h2>
            <p>响应式设计是一种网站设计理念，旨在让网页能够适应各种设备和屏幕尺寸，提供一致且友好的用户体验。媒体查询是实现响应式设计的核心技术，它允许开发者根据设备的特性（如屏幕宽度、分辨率和方向）来应用特定的样式规则。
            </p>
            <p>例如，下面的媒体查询规则将在屏幕宽度小于 768px 时调整页面的字体大小和容器内边距：</p>
            <pre>
@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 10px;
  }
  .container {
    width: 100%;
    margin: 0;
  }
}
    </pre>
            <p>通过媒体查询，开发者可以对不同设备制定个性化的布局和样式策略，从而提升页面在移动设备、平板和桌面端的表现。</p>
        </section>

        <footer>
            <p>以上内容详细介绍了 CSS 的基本概念、选择器与样式规则、常见的布局方式（Flexbox、Grid、Float）以及响应式设计与媒体查询。掌握这些知识将帮助你创建既美观又具有良好用户体验的现代化网页。</p>
        </footer>
    </div>
    <div id="content-2" class="layout content content-hide">
        <h1>HTML 基础</h1>

        <!-- HTML 的基本结构 -->
        <section id="basic-structure">
            <h2>HTML 的基本结构</h2>
            <p>HTML（超文本标记语言）是一种用于构建网页结构的标记语言。一个标准的 HTML 文档由多个部分构成，主要包括：</p>
            <ul>
                <li><strong>DOCTYPE 声明</strong>：放在文档的最前面（例如 <code>&lt;!DOCTYPE html&gt;</code>），用于告诉浏览器当前文档使用 HTML5 标准。
                </li>
                <li><strong>html 标签</strong>：整个文档的根容器，所有其他标签都位于其中。</li>
                <li><strong>head
                        标签</strong>：包含文档的元数据，如字符编码（<code>&lt;meta charset="UTF-8"&gt;</code>）、标题（<code>&lt;title&gt;</code>）以及与外部样式表或脚本文件的链接。
                </li>
                <li><strong>body 标签</strong>：包含页面的主要显示内容，如文本、图片、链接等所有用户可见的信息。</li>
            </ul>
            <p>下面是一个简单的 HTML 文档示例：</p>
            <pre>
      &lt;!DOCTYPE html&gt;
      &lt;html lang="zh"&gt;
        &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;示例页面&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
          &lt;p&gt;这是一个 HTML 基础示例。&lt;/p&gt;
        &lt;/body&gt;
      &lt;/html&gt;
          </pre>
        </section>

        <!-- 常见的 HTML 标签 -->
        <section id="common-tags">
            <h2>常见的 HTML 标签</h2>
            <p>在 HTML 开发中，有一些标签极为常用，它们分别承担着不同的功能：</p>
            <ul>
                <li>
                    <strong>&lt;div&gt;</strong>：通用容器标签，经常用于将页面内容进行分组和布局。通过配合 CSS，可以实现复杂的页面排版和样式控制。
                </li>
                <li>
                    <strong>&lt;p&gt;</strong>：定义段落，是组织块级文本内容的基本标签。
                </li>
                <li>
                    <strong>&lt;a&gt;</strong>：用来创建超链接，通过 <code>href</code> 属性指定链接目标，可链接到其他页面或区域。
                </li>
                <li>
                    <strong>&lt;img&gt;</strong>：用于嵌入图像，通过 <code>src</code> 属性指定图像地址，并常配有 <code>alt</code> 属性用于图像描述。
                </li>
                <li>
                    <strong>&lt;table&gt;</strong>：用来创建表格，通常会与
                    <code>&lt;tr&gt;</code>（行）、<code>&lt;td&gt;</code>（单元格）、<code>&lt;th&gt;</code>（表头）等标签一起使用。
                </li>
            </ul>
            <p>此外，还包括其他常用标签，如列表标签（<code>&lt;ul&gt;</code>、<code>&lt;ol&gt;</code>、<code>&lt;li&gt;</code>）、表单标签（<code>&lt;form&gt;</code>、<code>&lt;input&gt;</code>、<code>&lt;button&gt;</code>）等。熟悉这些标签的使用能够帮助开发者构建出结构合理、具有层次感的网页。
            </p>
        </section>

        <!-- HTML5 新增特性 -->
        <section id="html5-features">
            <h2>HTML5 新增特性</h2>
            <p>HTML5 是 HTML 的最新标准，它在保持原有功能的基础上引入了许多新特性，以增强网页的表现力和交互性。主要新增特性有：</p>
            <ul>
                <li>
                    <strong>新元素：</strong>
                    <p>新增了一系列语义化标签，如
                        <code>&lt;header&gt;</code>（定义头部区域）、<code>&lt;footer&gt;</code>（定义页脚区域）、<code>&lt;nav&gt;</code>（定义导航部分）、<code>&lt;article&gt;</code>（定义独立的文章内容）以及
                        <code>&lt;section&gt;</code>（定义文档中的章节），这些都能让网页结构更清晰。
                    </p>
                </li>
                <li>
                    <strong>多媒体支持：</strong>
                    <p>为视频和音频的嵌入提供了标记支持，新增了 <code>&lt;video&gt;</code> 和 <code>&lt;audio&gt;</code>
                        标签，无需依赖第三方插件即可实现多媒体播放。</p>
                </li>
                <li>
                    <strong>图形和动画：</strong>
                    <p>引入了 <code>&lt;canvas&gt;</code> 标签，使得在网页中可以直接绘制图形、生成动画甚至实现复杂数据的可视化。</p>
                </li>
                <li>
                    <strong>表单的增强：</strong>
                    <p>HTML5 提供了新的表单控件，如日期、时间、颜色选择等，极大地方便了用户交互。</p>
                </li>
                <li>
                    <strong>本地存储：</strong>
                    <p>通过 Web Storage API（localStorage 和 sessionStorage），允许在用户浏览器中存储数据，提高应用的交互性和响应速度。</p>
                </li>
            </ul>
            <p>这些新增特性不仅提升了用户体验，还有助于开发者构建功能更丰富、交互更流畅的现代网页应用。</p>
        </section>

        <!-- 页面语义化的重要性 -->
        <section id="semantic-importance">
            <h2>页面语义化的重要性</h2>
            <p>语义化是指通过使用具有明确意义的 HTML 标签来描述网页的内容和结构，这对于开发和维护网站有着深远的意义：</p>
            <ul>
                <li><strong>提高可访问性：</strong>语义化标签可以帮助屏幕阅读器和其他辅助技术更好地解析页面结构，从而帮助视障人士等用户更容易地浏览网站内容。</li>
                <li><strong>优化搜索引擎：</strong>搜索引擎更倾向于解析和理解语义化良好的页面，能够更准确地抓取关键信息，从而提升相关搜索的排名。</li>
                <li><strong>增强代码的可维护性：</strong>结构清晰、语义明确的 HTML 代码不仅便于开发者阅读和维护，也能大幅降低因代码混乱导致的后续开发成本。</li>
                <li><strong>促进跨平台兼容性：</strong>语义化标签使页面结构更清晰，保证网页在各类设备和不同浏览器中的一致性和稳定性。</li>
            </ul>
            <p>因此，采用语义化标签不仅能改善用户体验，还能提高代码质量和搜索引擎表现，是现代网页开发的必然选择。</p>
        </section>

        <footer>
            <p>以上内容详细介绍了 HTML 的基本结构、常见标签、HTML5 新增特性以及页面语义化的重要性。掌握这些基础知识将帮助你构建出结构合理、效果出众的网页，为后续学习 CSS、JavaScript
                和其他前端技术打下坚实的基础。</p>
        </footer>
    </div>
    <div id="content-1" class="layout content content-show">
        <h1>前端开发简介</h1>

        <section id="what-is-frontend">
            <h2>什么是前端开发？</h2>
            <p>前端开发主要指的是网站或 Web
                应用中，用户直接接触到的部分的实现。它涉及将设计转化为代码，确保内容、布局、视觉效果以及交互能够在浏览器上完美呈现。前端工程师不仅需要理解编程语言，更需要有丰富的设计感和用户体验意识，从而让网站既美观又实用。换句话说，前端开发的本质在于构建一个用户易于理解和操作的界面，让技术与审美相辅相成。
            </p>
        </section>

        <section id="role-of-frontend">
            <h2>前端开发的作用</h2>
            <p>前端开发承载着用户与应用之间的桥梁作用。它不仅仅是静态页面的展示，而是通过动态效果、交互逻辑和响应式设计，提升用户体验。具体来说，前端开发的作用包括：</p>
            <ul>
                <li><strong>交互体验：</strong>通过 JavaScript 和其他前端技术，用户在点击、滑动、悬停等操作时能获得及时的反馈，保证操作上的流畅性。</li>
                <li><strong>视觉呈现：</strong>利用 HTML 和 CSS 构建页面的结构和样式，使网站富有吸引力并传达品牌形象和设计美学。</li>
                <li><strong>响应式设计：</strong>适配各种设备与浏览器，确保无论用户使用的是台式机、平板还是手机，都能获得一致而优质的体验。</li>
                <li><strong>性能优化：</strong>通过合理的代码组织、资源管理和剪裁，确保页面加载速度快、运行效率高，从而提升整体用户满意度。</li>
            </ul>
            <p>总之，优质的前端开发能够极大地提高用户留存率、转化率，同时帮助企业树立专业形象。</p>
        </section>

        <section id="core-technologies">
            <h2>前端开发的核心技术（HTML、CSS、JavaScript）</h2>
            <p>在前端开发的世界中，有三大核心技术构成了它的基础：</p>
            <ol>
                <li>
                    <strong>HTML（超文本标记语言）</strong>: HTML 是构建网页的骨架，它负责定义页面的基本结构和内容。无论是标题、段落、列表，还是图像、链接，HTML
                    都为这些元素提供语义化的标签，从而利于后续的样式设计和内容管理。
                </li>
                <li>
                    <strong>CSS（层叠样式表）</strong>: CSS 则赋予网站以美感。利用
                    CSS，开发者可以控制网页中的颜色、字体、间距、布局等细节，使页面不仅满足基本展示要求，还能呈现出视觉冲击和精美的设计感。响应式布局、动画效果以及各种视觉特效，主要都是通过 CSS 实现的。
                </li>
                <li>
                    <strong>JavaScript</strong>: JavaScript
                    是前端开发中多功能的语言。它使网页不再是静态信息的堆积，而是一个可以交互、动态变化的应用。无论是简单的表单验证，还是复杂的数据交互、实时动画与异步加载，JavaScript
                    都发挥着举足轻重的作用。同时，随着生态系统的壮大，各种前端框架（如 React、Vue、Angular）也丰富了 JavaScript 的应用场景，使其成为现代前端开发不可或缺的一部分。
                </li>
            </ol>
            <p>这些技术相互补充，共同构成了前端开发的坚实基础，让开发者能够从结构、样式到交互，全面掌控用户界面的构建。</p>
        </section>

        <section id="frontend-backend-difference">
            <h2>前端和后端的区别</h2>
            <p>在网站或网络应用的开发过程中，前端和后端承担着截然不同但互补的任务：</p>
            <ul>
                <li><strong>前端：</strong>专注于用户界面和体验，是用户直接看到和交互的部分。前端主要关心页面如何呈现、交互效果如何设计以及如何在各种设备上流畅显示。它处理的是浏览器端的逻辑和显示，确保用户操作直观顺畅。
                </li>
                <li><strong>后端：</strong>涉及到服务器、数据库以及业务逻辑的实现。后端开发者通常负责数据的存储、处理和传输，通过构建 API
                    或服务，将数据安全高效地提供给前端。后端工作注重服务器架构、数据安全、性能优化和大规模并发处理。</li>
            </ul>
            <p>举个例子，当用户在一个电商网站上点击购买按钮时，前端负责捕捉点击事件、展现视觉反馈，而后端则负责处理订单、管理库存、处理支付等业务逻辑。只有前后端高效协作，才能带来流畅、完美的用户体验。</p>
        </section>

        <footer>
            <p>以上内容不仅为对前端开发的基本概念进行介绍，同时也帮助理解在整个 Web
                开发领域中，各部分如何相互协调、共同作用，成就一个成功的产品。后续章节还会探讨如何优化页面性能、深入前端框架与工具链，以及前端与后端高效协作的最佳实践。此外，还将关注前沿技术，如移动端优先设计和渐进式 Web
                应用（PWA），帮助你更全面地了解前端开发的未来方向。</p>
        </footer>
    </div>
</body>

</html>